<template>
  <el-form
    :model="formData"
    label-position="left"
    ref="formRef"
    style="max-width: 800px"
  >
    <transition-group 
      name="project-list" 
      tag="div"
      style="position: relative;"
    >
      <el-form-item
        v-for="(project, index) in formData"
        :key="project.id"
        class="project-item"
        style="position: relative;"
      >
        <el-icon 
          class="delete-icon"
          @click="removeProject(index)"
        >
          <Close />
        </el-icon>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item 
              label="项目名称"
              :prop="`${index}.name`"
              :rules="{ required: true, message: '请输入项目名称', trigger: 'blur' }">
              <el-input
                v-model="project.name"
                placeholder="请输入项目名称"
                clearable
                style="width: 100%"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item 
              label="角色"
              :prop="`${index}.role`"
              :rules="{ required: true, message: '请输入角色', trigger: 'blur' }">
              <el-input
                v-model="project.role"
                placeholder="请输入角色"
                clearable
                style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item 
              label="项目时间"
              :prop="`${index}.duration`"
              :rules="{ required: true, message: '请选择时间', trigger: 'change' }">
              <el-date-picker
                v-model="project.duration"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="详细内容">
              <el-input
                v-model="project.description"
                type="textarea"
                :rows="4"
                placeholder="请详细描述你的职责范围，工作任务以及取得成绩"
                style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
    </transition-group>

    <el-form-item style="margin-top: 20px">
      <el-button type="primary" @click="addProject">添加项目经验</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { useResumeStore } from '../../store/resume'

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ([])
  }
})

const resumeStore = useResumeStore()
let uid = 1
const formData = reactive([{
  id: uid++,
  name: '',
  role: '',
  duration: '',
  description: ''
}])

onMounted(() => {
  Object.assign(formData, props.initialData)
})

const getFormData = () => {
  return Promise.resolve(formData)
}

defineExpose({
  getFormData
})

const addProject = () => {
  formData.push({
    id: uid++,
    name: '',
    role: '',
    duration: '',
    description: ''
  })
}

const removeProject = (index) => {
  formData.splice(index, 1)
}
</script>

<style scoped>
.project-item {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.project-list-move {
  transition: all 0.3s ease;
  z-index: 2;
}

.project-list-enter-active {
  transition: all 0.3s ease;
}

.project-list-leave-active {
  transition: all 0.3s ease;
  position: absolute !important;
  width: 100%;
}

.project-list-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.project-list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.project-list-leave-active {
  position: absolute;
  width: 100%;
}

.delete-icon{
  color: '#F56C6C';
  position: absolute;
  left: -32px;
  top: -32px;
  width: 1.2em;
  height: 1.2em;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  z-index: 1;
}

.delete-icon:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 4px rgba(245, 108, 108, 0.3));
  color: #ff7878;
}

.delete-icon:active {
  transform: scale(0.85);
}

.delete-icon::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  background: rgba(245, 108, 108, 0.1);
  opacity: 1.5;
  transition: opacity 0.2s;
}

.delete-icon:hover::after {
  opacity: 1;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-form-item__label {
  padding-right: 12px;
}
</style>
